<template>
	<view>
		<view style="height: 10px;"></view>
		<uni-card :is-shadow="false">
			<view class="header">
				<!-- 标题 -->
				<template>
					<uni-title type="h1" :title="postName"></uni-title>
				</template>
				<!-- 发帖信息 -->
				<view>
					<!-- 发帖人信息 -->
					<view style="display: table;">
						<image
							style="width: 40px;height: 40px;border-radius: 50%;overflow: hidden;margin-top: 5px; margin-left: 5px;"
							src="../../static/logo.png"></image>
						<text
							style="display: table-cell;vertical-align: middle;text-align: center;padding-left: 10px;">卷王</text>
					</view>
					<!-- 帖子简介 -->
					<view style="margin-top: 10px;">
						<text>讨论，考研要不要大一就开始准备</text>
					</view>
					<!-- 帖子操作栏-->
					<view>
						<uni-row class="demo-uni-row" style="text-align: center;">
							<uni-col :span="8">
								<view class="card-actions-item" @click="actionsClick('分享')">
									<uni-icons type="redo" size="18" color="#999"></uni-icons>
									<text class="card-actions-item-text">分享</text>
								</view>
							</uni-col>
							<uni-col :span="8">
								<view class="card-actions-item" @click="actionsClick('点赞')">
									<uni-icons type="heart" size="18" color="#999"></uni-icons>
									<text class="card-actions-item-text">点赞</text>
								</view>
							</uni-col>
							<uni-col :span="8">
								<view class="card-actions-item" @click="actionsClick('评论')">
									<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
									<text class="card-actions-item-text" @click="open">评论</text>
									<uni-popup ref="popup" type="dialog">
										<uni-popup-dialog mode="input" message="成功消息" :duration="2000"
											:before-close="true" @close="close" @confirm="confirm" title="发表评论">
										</uni-popup-dialog>
									</uni-popup>
								</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</view>
		</uni-card>
		<!-- 评论区 -->
		<view>
			<uni-card title="全部评论" :is-shadow="false">
				<uni-collapse>
					<!-- 因为list默认带一条分隔线，所以使用 titleBorder="none" 取消面板的分隔线 -->
					<uni-collapse-item title-border="none" :border="false" v-for="(item,index) in postReplyInfo"
						:key="index">
						<template v-slot:title>
							<uni-list>
								<uni-list-item :title="item.replyName">
									<template slot="header">
										<image @click="toPrivateChat()"
											style="width: 30px; height: 30px;margin-right: 10px;" class="slot-image"
											:src="item.replyPortraitUrl" mode="widthFix"></image>
									</template>
									<template slot="footer">
										<view style="margin-left: 400px;" class="card-actions-item"
											@click="actionsClick('点赞')">
											<uni-icons type="heart" size="18" color="#999"></uni-icons>
											<text class="card-actions-item-text">点赞</text>
										</view>
										<view class="card-actions-item" @click="actionsClick('评论')">
											<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
											<text class="card-actions-item-text" @click="open">评论</text>
										</view>
									</template>
								</uni-list-item>
								<text
									style="margin-left: 60px;margin-bottom: 5px;font-size: initial;">{{item.replyContent}}</text>
							</uni-list>
						</template>
						<view class="content" style="margin-left: 40px;" v-for="(item1,index1) in postReplyInfo"
							:key="index1">
							<uni-list-item :title="item1.replyName">
								<template slot="header">
									<image style="width: 40px; height: 40px;margin-right: 10px;" class="slot-image"
										:src="item1.replyPortraitUrl" mode="widthFix"></image>
								</template>
								<template slot="footer">
									<view style="margin-left: 400px;" class="card-actions-item"
										@click="actionsClick('点赞')">
										<uni-icons type="heart" size="18" color="#999"></uni-icons>
										<text class="card-actions-item-text">点赞</text>
									</view>
									<view class="card-actions-item" @click="actionsClick('评论')">
										<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
										<text class="card-actions-item-text" @click="open">评论</text>
									</view>
								</template>
							</uni-list-item>
							<text
								style="margin-left: 60px;margin-bottom: 5px;font-size: initial;">{{item1.replyContent}}</text>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</uni-card>
		</view>

		<!-- 底部 -->
		<view style="height: 10px;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postName: "",
				postReplyInfo: [{
					replyName: "卷王1号",
					replyContent: "哈哈哈",
					replyPortraitUrl: "/static/logo.png"
				}, {
					replyName: "卷王2号",
					replyContent: "开心就行",
					replyPortraitUrl: "/static/logo.png"
				}, {
					replyName: "卷王3号",
					replyContent: "大一好好玩",
					replyPortraitUrl: "/static/logo.png"
				}, {
					replyName: "卷王4号",
					replyContent: "123",
					replyPortraitUrl: "/static/logo.png"
				}, {
					replyName: "卷王5号",
					replyContent: "考研",
					replyPortraitUrl: "/static/logo.png"
				}]
			}
		},
		onLoad: function(option) {
			this.postName = option.postName
		},
		methods: {
			toPrivateChat() {
				uni.navigateTo({
					url: './PrivateChat?chatName=卷王1号',
					fail: function(res) {
						console.log("error" + res);
					}
				})
			},
			open() {
				this.$refs.popup.open()
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(value) {
				// 输入框的值
				console.log(value)
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			}
		}
	}
</script>

<style>
</style>
